<template>
  <Tab @goBack="goBack" :tabs="tabs" :current="current">
    <div slot="index">
      <el-form :inline="true" label-width="80px">
        <el-form-item label="标题">
          <el-input
            v-model="queryParams.title"
            placeholder="标题"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="客户端">
          <el-select style="width: 100px;" @keyup.enter.native="handleQuery" v-model="queryParams.app" placeholder="客户端"
                     clearable
                     size="small">
            <el-option
              v-for="dict in roleOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="状态">
          <el-select
            style="width: 100px;"
            @keyup.enter.native="handleQuery" v-model="queryParams.status" placeholder="状态" clearable
            size="small">
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="daterange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-row>
          <el-form-item label="省/市">
            <el-select :filterable="true" @keyup.enter.native="handleQuery" v-model="queryParams.provinceId"
                       placeholder="选择或者输入搜索省" clearable size="small" @clear="provinceClear" @change="provinceChange">
              <el-option
                v-for="dict in areaList"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
            -
            <el-select filterable @keyup.enter.native="handleQuery" v-model="queryParams.cityId" placeholder="选择或者输入搜索市"
                       clearable size="small">
              <el-option
                v-for="dict in cityList"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleInsert"
                       v-hasPermi="['main:banner:add']">添加
            </el-button>
          </el-form-item>
        </el-row>


      </el-form>

      <el-table v-loading="loading" :data="postList">
        <el-table-column label="标题" align="center" prop="title" :show-tooltip-when-overflow="true"/>
        <el-table-column label="客户端" align="center" prop="app" :formatter="typeFormat"/>
        <el-table-column label="显示城市" align="center">
          <template slot-scope="scope">
            <span class="text-jumbo" v-if="scope.row.cityId">{{scope.row.provinceName+'-'+scope.row.cityName}}</span>
            <span class="text-navy" v-else>全国</span>
          </template>
        </el-table-column>

        <el-table-column label="轮播图" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover placement="right" title="" trigger="click">
                <img :src="scope.row.image" alt="">
                <img slot="reference" :src="scope.row.image" alt="" style="max-height: 50px;max-width: 50px">
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="指向地址" align="center" prop="url" :show-tooltip-when-overflow="true">
          <template slot-scope="scope">
            <el-link :href="scope.row.url" target="_blank" type="primary">{{scope.row.url}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.starttime|dateFilter('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.endtime|dateFilter('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>


        <el-table-column label="备注" align="center" prop="remark" :show-tooltip-when-overflow="true"/>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span class="text-danger" v-if="scope.row.status===0">已下线</span>
            <span class="text-info" v-if="scope.row.status===1">待上线</span>
            <span class="text-navy" v-if="scope.row.status===2">已上线</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createtime" :show-tooltip-when-overflow="true"/>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="scope"  >
            <el-button
              size="mini"
              type="primary"
              @click="handleOnline(scope.row)"
              v-hasPermi="['main:banner:edit']"
              v-show="scope.row.status===1"
            >上线
            </el-button>
            <el-button
              size="mini"
              @click="handleOffline(scope.row)"
              v-hasPermi="['main:banner:edit']"
              v-show="scope.row.status===2"
              type="warning"
            >下线
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['main:banner:edit']"
              v-show="scope.row.status!==0"
            >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              v-hasPermi="['main:banner:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="add">
      <Add :areaList="areaList" :status-options="statusOptions" :role-options="roleOptions" :row="row"
           @goBack="goBack"></Add>
    </div>
    <div slot="edit">
      <Edit :areaList="areaList" :status-options="statusOptions" :role-options="roleOptions" :row="row"
           @goBack="goBack"></Edit>
    </div>
  </Tab>

</template>

<script>
  import Tab from "@/components/Tab";
  import {listBanner, editBanner, removeBanner} from "@/api/main/app/banner";
  //import {areaList} from "@/api/main/common/area";
  import {area} from "@/utils/area";
  import Add from "./add";
  import Edit from "./edit";

  export default {
    components: {Tab, Add,Edit},
    data() {
      return {
        row: undefined,
        open: false,
        addLoading: false,
        loading: false,
        daterange: undefined,
        areaList: undefined,
        cityList: [],
        postList: [],
        roleOptions: [],
        statusOptions: [
          {"dictLabel": "已下线", "dictValue": "0"}
          , {"dictLabel": "待上线", "dictValue": "1"}
          , {"dictLabel": "已上线", "dictValue": "2"}],
        current: 'index',
        tabs: [
          {index: 'index', name: ''}, {'index': 'add', name: '新增轮播'}, {'index': 'edit', name: '编辑轮播'}
        ],
        title: '',
        total: 0,
        loadingInstance: undefined,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          cityId: undefined,
          provinceId: undefined,
          status: undefined,
          title: undefined
        }
      }
    },
    created() {
      this.getDicts("yy_user_role").then(response => {
        this.roleOptions = response.data;
      });
      area().then(response => {
        this.areaList = response;
      });

      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        listBanner(this.queryDateRange(this.queryParams, this.daterange)).then(response => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleDelete(row) {
        let _this = this;
        this.$confirm(`确定要删除标题名为[${row.title}]的记录?删除将找不回此记录.`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          removeBanner(row.id).then(response => {
            _this.msgSuccess("删除成功");
            _this.getList();
          });
        }).catch(function (e) {
          console.log(e);
        });
      },
      handleInsert() {
        this.row = undefined;
        //this.$set(this.tabs, 1, {index: 'add', name: '新增轮播'});
        this.current = 'add';
      },
      handleUpdate(row) {
        this.row = row;
        //this.$set(this.tabs, 1, {index: 'add', name: '编辑轮播'});
        this.current = 'edit';
      },
      handleOffline(row) {
        let _this = this;
        this.$confirm(`确定要更改标题名为[${row.title}]的状态为下线?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(function () {
          editBanner({id: row.id, status: 0, cityId: row.cityId}).then(response => {
            _this.msgSuccess("下线成功");
            _this.getList();
          });
        }).catch(function (e) {
          console.log(e);
        });
      },
      handleOnline(row) {
        let _this = this;
        this.$confirm(`确定要更改标题名为[${row.title}]的状态为上线?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(function () {
          editBanner({id: row.id, status: 2, cityId: row.cityId}).then(response => {
            _this.msgSuccess("上线成功");
            _this.getList();
          });
        }).catch(function (e) {
          console.log(e);
        });
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      cancel() {
        this.open = false;
        this.reset();
      },
      typeFormat(row, column) {
        let option;
        if (column.property === 'status') {
          option = this.statusOptions;
        } else if (column.property === 'app') {
          option = this.roleOptions;
        }
        return this.selectDictLabel(option, row[column.property]);
      },
      goBack(message) {
        this.current = 'index';
        if (message === 'addBanner' || message === 'editBanner') {
          this.getList();
        }
      },
      provinceClear() {
        this.queryParams.cityId = '';
        this.cityList = [];
        console.log('====>>');
      },
      provinceChange(value) {
        if (value) {
          console.log(value);
          this.queryParams.cityId = '';
          this.cityList = this.areaList.filter(item => item.value === value)[0].children;
          console.log(this.cityList);
        }
      },
    }
  }
</script>

<style>

</style>
